<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>一生平安-血糖查询</title>
<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile-1.0b1.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/jszx-scroll.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/jszx-bar.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/dynamicPic.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}/lib/mobile/css/mobile.css" />
	<link type="text/css" href="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.min.css" rel="stylesheet" />
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery-1.6.4.min.js"></script>
	<script>
	$(document).bind("mobileinit", function(){
		$.mobile.loadingMessage=false;
		$.mobile.selectmenu.prototype.options.nativeMenu = false;
		$.mobile.defaultPageTransition="none";
		$.mobile.listview.prototype.options.filterPlaceholder="";
	});
	</script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile-1.0b1.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/mobile-common.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/dynamicPic.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/mobile.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/js/highcharts.js" charset="utf-8"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.js"></script>
	<script type="text/javascript" src="${ctx}/lib/mobile/jquery_mobile_1.0b1/jquery.mobile.datebox.i8n.CHN-S.utf8.js"></script>
</head>
<body>
	<div data-role="page" id="mobile-measemp02-page" class="page-div-style">
		<script>
		$('#mobile-measemp02-page').live('pagebeforeshow',function(){
			//加载等待
			showLoadPage();
			
			//显示头部栏
	 		initHeader($("#mobileMeasemp02ListHeader"),"back");
			//显示功能列表的头部标题名称
			$("#mobileMeasemp02ListHeader").find("[name='mobileHeaderTitle']").text("血糖查询");
	 		
			$("#mobileMeasemp02Bar").empty();
           	
           	//清空列表
	 		$("#measemp02ListUl").empty();
			
			//更新数据
			getListData(1,'1',"-30");
		});
		
		$("#mobile-measemp02-page").live("pageshow",function(){
			
		});
		
		function changeTime(queryTime){
			getListData(1,'up',"" + queryTime);
		}
		
		//获得数据 type 1:页面初始化
		function getListData(page,type,querTime){
			// 下滑加载显示等待
			if(type!="up"){
				//加载等待
				showLoadPage();
			}
			
			//当前页
			page = (typeof page=="number")?page:1;
			//ajax获取待办工单
			var arg = [showScroll,type,querTime];//包含函数和参数的数组
			//获取列表信息
			getMeasempListData(arg,page,querTime,"M02");
            window.pageNum = page;
		}
		
		//组织显示 菜单的功能列表
		function showScroll(data,arg)
		{
           	var type = arg[1];
           	if(type=="up"){
           		//清空列表
		 		$("#measemp02ListUl").empty();
           	}
           	if(data === null){
           		window.location.href = "${ctx}/mobile/login.html";
           	}
           	
          	//组织显示血糖查询列表ul
			showManagerList(data,$("#measemp02ListUl"));
          	
      		//结束等待
			hideLoadPage();
		}
		
		window.li_div_active=1;
		
		//组织显示测量规划列表ul
		function showManagerList(jsonRows,$ul){
  			if(jsonRows.length != 0){
				//已读的血糖查询ID串
				var measemp02Ids = "" + window.localStorage.getItem("measemp02Ids");
				
				var xAxis = new Array();
				// 血糖
				var glu = new Array();
				
				for(var i = 0 ; i < jsonRows.length ; i++){
					upddate = new Date(jsonRows[i].upddate);
					xAxis[jsonRows.length-1-i] = upddate.getDate();
					glu[jsonRows.length-1-i] = jsonRows[i].glu;
					
	  				var li_measemp_glu = jsonRows[i].glu;//收缩压
	  				var li_datadate = upddate;
	  				
	  				li_datadate = formatDate(upddate) + " " + formatTime(upddate);
	  				
	  				var li_isTop = jsonRows[i].is_top;//是置顶
	  				var li_id = jsonRows[i].rowid;//id
					//判断是否已读
					var isView = false;
					if(measemp02Ids.indexOf("," + li_id) != -1){
						isView = true;
					}
					
					var li = $("<li class=\"text_style text_pointer\"></li>");
					var table = $("<div align='center'><div class='li_div li_div_active li_measemp'><table>"
						+ "<tr><td name=\"title\" style=\"\"><p style=\"width:" 
						+ (window.innerWidth - 50) + "px\" class=\"p_desc\">&nbsp;血糖:" + li_measemp_glu 
						+ "</p></td></tr>"
						+"<tr><td align=\"right\"><a class=\"text_time_style\">" + li_datadate + "</a></td></tr></table><div><div>");
					li.append(table);
							
					//工作动态详情
					table.bind("click",function(arg,obj){
						return function(){
							
						};
					}(jsonRows[i],table));
					
					table.bind("mousemove",function(arg,obj){
						return function(event){
							$("#aboutMobile_opacity").find(".msgbox").css("top",window.innerHeight/3 + (event.pageY - event.clientY) );
							$("#aboutMobile_opacity").find(".tips").text("测量规划");
						};
					}(jsonRows[i],table));
					
					$ul.append(li);
					
					window.li_div_active++;
				}
				
				makechart('',xAxis,'',
						[
						 	{name:"血糖",data:glu,color:"#F58659"}
						]
					);
			} else {
				makechart('',["0"],'',
						[{name:"血糖",data:[0],color:"#F58659"}]
					);
			}
			$ul.listview('refresh');
		}
		
		var index = new Object();
		//显示 信息层
		index.showMsgBox = function(){
			$("#aboutMobile_opacity").show();
			$("#index_showBox").find(".msgbox").removeClass("alert-box-anim");
			$("#index_showBox").find(".msgbox").removeClass("alert-box-anim-out");
			setTimeout(function(){
				$("#index_showBox").find(".msgbox").addClass("alert-box-anim");
			}, 1);
		};
		
		//隐藏 信息层
		index.hideMsgBox = function(){
			$("#index_showBox").find(".msgbox").addClass("alert-box-anim-out");
			setTimeout(function(){
				$("#aboutMobile_opacity").hide();
			}, 250);
		};
		
		//生成报表
	 	function makechart(title,xAxis,yAxis,series){
			new Highcharts.Chart({
				chart:{
					renderTo:"container"
					,type:"line"
				}
				,title:{
					text:title
				},
			 	plotOptions: { 
		    		column: { 
		     			dataLabels: { 
		            		enabled: true 
		        		}, 
		        		pointPadding: 0.2, 
		        		borderWidth: 0 
		   			} ,
		   			line: {
		                    dataLabels: {
		                        enabled: true
		                    },
		                    enableMouseTracking: false
		                }
				} 	
				,xAxis:{categories:xAxis,labels: {
		                 rotation: 45
		            }
				}
				,yAxis:{title:{text:yAxis}}
				,series:series,
				credits:{
				     enabled:false // 禁用版权信息
				}
			});
			$('tspan:contains(\'Highcharts.com\')').text('');
		}
		
		</script>
		<div id="aboutMobile_opacity" class="menu_opacity">
			<div class="menu_opacity_black">
			</div>
			<div class="menu_opacity_showBox" id="index_showBox" onclick="index.hideMsgBox();">
				<div class="msgbox alert-box-anim">
					<div class="tips">血糖查询</div>
					<div class="box-content" align="center" id="measemp02Div">
						<table style="">
							<tr><td style="">提醒:</td><td id="medicine"></td></tr>
							<tr><td style="">时间:</td><td id="time"></td></tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div style="position:absolute;width:100%;height:100%;top:0;display:none;z-index:100;" id="loginWait">
			<div style="position:absolute;height:100%;width:100%;top:0;">
				<div style="top:40%;height:90px;border-radius:8px;-webkit-box-shadow:1px 1px 1px #ccc;
					background:#ffffff;text-align:center;opacity:0.8;position: absolute;
					z-index: 100;left: 50%;width: 200px;margin-left: -130px;margin-top: -35px;padding: 10px 30px;">
					<img id="load_img" src="${ctx}/lib/mobile/image/load.gif" style="position:relative;">
					<p id="load_content" style="position:relative;">加载中...</p>
				</div>
			</div>
		</div>
		<div data-role="header" data-position="" data-backbtn="false" data-theme="b" id="mobileMeasemp02ListHeader">
		</div>
		<div data-role="content" id="mobileMeasemp02ListWrapper" style="padding:0;background: white;padding-bottom: 10px;" 
			class="jszx-wrapper">
			<div id="mobileMeasemp02ListScroller" class="jszx-scroller" style="">
				<div style="" align="center">
			    	<div class="measemp_div_01" style="">
			    		血糖曲线
			    	</div>
				</div>
				<div align="center">
			    	<div class="measemp_div_01 measemp_div_02" style="">
			    		<div class="div_time_01" onclick="changeTime(-7);">一周</div>
    					<div class="div_time_01 div_time_02" onclick="changeTime(-14);">两周</div>
   						<div class="div_time_01 div_time_03" onclick="changeTime(-30);">一月</div>
			    	</div>
				</div>
				<div id="container" style="width:100%;height:200px;"></div>
				<ul data-role="listview" style="background-color: #5CC4BD;" id="measemp02ListUl" class="ui-btn-corner-all ul_rxjj">
				</ul>
			</div>
		</div>
	</div>
</body>
</html>